<template>
	<z-nav-bar title="积分商城" transparentTitle="auto" :isBlack="false"></z-nav-bar>
	<view class="content">
		<view class="uni-px-32">
			<view class="flex_sbc uni-white">
				<view class="">
					<view>我的积分</view>
					<view class="z-font-60 text-w">{{ data.integral }}</view>
				</view>
				<navigator url="/pages/my/integral/integral" hover-class="none">
					<view class="flex_cc get-button">
						<view>获取积分</view>
						<uni-icons type="forward" size="14" color="#FFFFFF"></uni-icons>
					</view>
				</navigator>
			</view>
			<view class="item-box flex_sac">
				<view class="text-c">
					<image :src="setting.oss_pub_domain + '/app-img/my/shangcheng.png'" class="img"></image>
					<view class="z-font-24 uni-585C66">积分商城</view>
				</view>
				<navigator url="/pages/my/integral/list?type=1" class="text-c" hover-class="none">
					<image :src="setting.oss_pub_domain + '/app-img/my/mingxi.png'" class="img"></image>
					<view class="z-font-24 uni-585C66">兑换明细</view>
				</navigator>
				<view class="text-c">
					<image :src="setting.oss_pub_domain + '/app-img/my/dingdan.png'" class="img"></image>
					<view class="z-font-24 uni-585C66">积分订单</view>
				</view>
			</view>
			<view class="text-c uni-mt-74 uni-mb-24">
				<view class="flex_cc uni-mb-10">
					<image :src="setting.oss_pub_domain + '/app-img/my/title-bg.png'" class="icon-size-32"></image>
					<view class="title-box">积分兑换</view>
					<image :src="setting.oss_pub_domain + '/app-img/my/title-bg.png'" class="icon-size-32"></image>
				</view>
				<view class="z-font-24" style="color: #c4c7cc">热门权益服务</view>
			</view>
			<view class="flex_sbc flex_wrap">
				<navigator
					:url="`/pages/my/points-mall/details?id=${item.id}`"
					v-for="item in productData.list"
					:key="item.id"
					class="course-box uni-mb-36"
					hover-class="none"
				>
					<image :src="`${setting.oss_pub_domain}${item.coverImage}`" class="img" mode="aspectFill"></image>
					<view class="u-line-1 uni-mt-12">{{ item.name }}</view>
					<view class="uni-orange uni-mt-12">{{ item.price }}分</view>
				</navigator>
				<view class="course-box" style="visibility: hidden"></view>
			</view>
			<view v-if="productData.list.length < productData.total" class="flex_cc" @click="nextPage">
				<view class="uni-color-grey">更多积分兑换</view>
				<image :src="setting.oss_pub_domain + '/app-img/icon/ext.png'" class="icon-size-32"></image>
			</view>
		</view>
		<view class="line-spacing uni-mt-44" style="height: 16rpx"></view>
		<view class="bottom-img flex_cc">
			<image :src="setting.oss_pub_domain + '/app-img/home/bg.png'" class="img"></image>
		</view>
		<view class="line-spacing" style="height: 20rpx"></view>
	</view>
</template>

<script setup>
import { getProductList, getSignCount } from '@/api/integral.js';
import { onShow, onReachBottom } from '@dcloudio/uni-app';
import { ref, reactive, getCurrentInstance } from 'vue';
const { proxy: that } = getCurrentInstance();

// 获取积分信息
const data = reactive({
	integral: 0,
	isSign: false,
	signCount: 0
});

// 获取商品列表
const productData = reactive({
	list: [],
	total: 0,
	pageNum: 1
});
onShow(() => {
	getSignCount().then((res) => {
		Object.assign(data, res);
	});
});

fetchData();
function fetchData() {
	getProductList({ pageNum: productData.pageNum }).then((res) => {
		if (productData.pageNum === 1) productData.list = res.rows;
		else productData.list.push(...res.rows);
		productData.total = res.total;
	});
}

function nextPage() {
	if (productData.list.length >= productData.total) return;
	productData.pageNum += 1;
	fetchData();
}
</script>

<style lang="scss">
.content {
	background: linear-gradient(to bottom, #ff7742, #ffb242 400rpx, $uni-white 400rpx, $uni-white 100%);
	min-height: 100vh;
	padding: 200rpx 0 32rpx;
}

.title-box {
	font-size: 32rpx;
	font-weight: 700;
	margin: 0 16rpx 0 18rpx;
}

.get-button {
	width: 164rpx;
	height: 56rpx;
	border-radius: 16rpx;
	border: 2rpx solid $uni-white;
	font-size: 24rpx;
}

.item-box {
	width: 686rpx;
	height: 168rpx;
	background: #ffffff;
	box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.16);
	border-radius: 24rpx;
	margin-top: 20rpx;
	.img {
		width: 64rpx;
		height: 64rpx;
	}
}

.course-box {
	width: 216rpx;
	.img {
		width: 216rpx;
		height: 216rpx;
		border-radius: 10rpx;
		background: #f5f5f5;
	}
}

.bottom-img {
	width: 100vw;
	height: 252rpx;
	background: $uni-white;
	.img {
		width: 686rpx;
		height: 172rpx;
		border-radius: 16rpx;
		flex-shrink: 0;
	}
}
</style>
